<template></template>
<script>
import * as THREE from "three";
import { OrbitControls } from "three/examples/jsm/controls/OrbitControls";
import { GLTFLoader } from "three/examples/jsm/loaders/GLTFLoader";
import shulin from "./shuling.png";
import yu from "./yu.png";
// import model from "./";
import { requestAnimationFrame } from "cesium";
export default {
  name: "parent-app",
  data() {
    return {
    };
  },
  created() {},
  mounted() {
    this.load();
  },
  methods: {
    /** 初始加载 */
    load() {
      // 创建场景对象Scene
      let scene = new THREE.Scene();
      // 显示坐标系
      let axesHelper = new THREE.AxesHelper(200);
      scene.add(axesHelper);
      let group = new THREE.Group();
      const mixers = [];
      // 物体
      const loader = new GLTFLoader();
      console.log("loader", loader);
      loader.load("/static/Flamingo.glb", (gltf) => {
        console.log("gltf=====", gltf);
        const mesh = gltf.scene.children[0];

        const s = 0.35;
        mesh.scale.set(s, s, s);
        mesh.position.y = 15;
        mesh.rotation.y = -1;

        scene.add(mesh);

        const mixer = new THREE.AnimationMixer(mesh);
        mixer.clipAction(gltf.animations[0]).setDuration(1).play();
        mixers.push(mixer);
      });

      // 点光源
      let pointLight = new THREE.PointLight(0xffffff);
      pointLight.position.set(60, 600, 640);
      scene.add(pointLight);
      // 平行光源
      // let directLight = new THREE.DirectionalLight(0xffffff, 1);
      // directLight.position.set(60, 600, 640);
      // scene.add(directLight);
      // 环境光
      let ambientLight = new THREE.AmbientLight(0x444444);
      scene.add(ambientLight);

      //相机
      let width = window.innerWidth;
      let height = window.innerHeight;
      let k = width / height;
      let s = 300;
      // let camera = new THREE.OrthographicCamera(-s * k, s * k, s, -s, 1, 10000);
      // camera.position.set(850, 800, 800);
      /**透视投影相机对象*/
      let camera = new THREE.PerspectiveCamera(60, width / height, 1, 1000);
      camera.position.set(292, 19, 238);
      camera.lookAt(scene.position);

      let renderer = new THREE.WebGLRenderer();
      renderer.setSize(width, height);
      renderer.setClearColor(0xb9d3ff, 1); //设置背景颜色
      document.body.appendChild(renderer.domElement); //body元素中插入canvas对象

      let clock = new THREE.Clock();
      function render() {
        const delta = clock.getDelta();

        for (let i = 0; i < mixers.length; i++) {
          mixers[i].update(delta);
        }
        // 执行渲染操作   指定场景、相机作为参数
        renderer.render(scene, camera);
        requestAnimationFrame(render);
      }
      render();
      /** --------------------鼠标控件对象--------------------- */
      let controls = new OrbitControls(camera, renderer.domElement); //创建控件对象
      controls.addEventListener("change", render); //监听鼠标、键盘事件
    },
  },
};
</script>

